<template>
  <div class="about">
    <van-row v-for="item in shopcar" :key="item._id">
      <van-col span="4">
        <input type="checkbox" v-model="item.status" @change="changeStatus" />
      </van-col>
      <van-col span="20">
        <van-card :price="item.price" :title="item.title" :thumb="item.pic">
          <template #footer>
            <van-stepper v-model="item.num" />
          </template>
        </van-card>
      </van-col>
    </van-row>

    <van-submit-bar
      :price="$store.getters.allPrice * 100"
      button-text="提交订单"
    >
      <van-checkbox v-model="$store.state.checked" @click="checkAll"
        >全选</van-checkbox
      >
      <van-button type="primary" @click="del">选中删除</van-button>
    </van-submit-bar>
  </div>
</template>

<script>
import { ref, reactive, toRefs, computed } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
export default {
  setup(props, ctx) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const data = reactive({});
    const shopcar = computed(() => {
      return store.state.shopcar;
    });

    const changeStatus = () => {
      store.commit("changeStatus");
    };
    //点击复选框

    const checkAll = () => {
      store.commit("checkAll");
    };
    //点击全选按钮

    // const checkeds = computed(() => {
    //   return store.state.checked;
    // });
    // 我们普通的计算属性是一个简写 是get的简写

    // const checkeds = computed({
    //   get() {
    //     return store.state.checked;
    //   },
    //   set(val) {
    //     store.state.checked = val;
    //   },
    // });
    //  在这里 计算属性的值不再是只读的 作为v-model值去用的时候计算属性的值会改变 就需要set 来操作 set的参数val代表这个计算属性改变后的值

    const del = () => {
      store.commit("del");
    };
    return { ...toRefs(data), shopcar, changeStatus, checkAll, del };
  },
};
</script>

<style lang="scss"></style>
